<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="resources/js/jquery.innerfade.js"></script>
</head>

	<style>
			body {
				background: #FFF;	
				font-family: Arial,sans-serif;
				font-size: 12px;
				line-height: 1.0;}
			#ALL {
				width: 800px;
				margin: 30px auto;
				background: #FFF;
				padding: 20px;}		
			.menu { 
				height: 40px;
				background: #FF8224;}
			.menu ul {
				list-style: none;
				padding: 0;
				margin: 0;}
			.menu ul li {
				float: left;
				overflow: hidden;
				text-align: center;				
				line-height: 40px;}
			.menu ul li a {
				position: relative;
				display: block;
				width: 110px;
				height: 40px;
				color: #FFF; 
				font-family: Arial;
				font-size: 11px;
				font-weight: bold;
				letter-spacing: 1px;
				text-transform: uppercase;
				text-decoration: none;
				cursor: pointer;}

			.menu ul li a span {
				position: absolute;
				top: 0px;
				left: 0;
				width: 110px;	}	
			.menu ul li a span.over{
				top: -40px;	}	
			.menu ul li a span.over {
				background: #FFF;
				color: #FF8224;}

		</style>
<body>
<div id="ALL">
			<h1>B O O K</h1>
			<div class="menu">
				<ul>
					<li><a href="#">메뉴전체보기</a></li>
					<li><a href="#">국내도서</a></li>
					<li><a href="#">외국도서</a></li>
					<li><a href="#">e book</a></li>
					<li><a href="#">음반/DVD</a></li>
					<li><a href="#">이벤트</a></li>
				</ul>				
			</div>
		</div>

		<script type="text/javascript">
			$(function(){


				$(".menu li a").wrapInner( '<span class="out"></span>' );

				$(".menu li a").each(function() {
					$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
				});


				$(".menu li a").hover(function() {
					$(".out",	this).stop().animate({'top':	'45px'},	200); 
					$(".over",	this).stop().animate({'top':	'0px'}, 200);

				}, function() {
					$(".out",	this).stop().animate({'top':	'0px'},		200); 
					$(".over",	this).stop().animate({'top':	'-45px'}, 200);
				});





			});
		</script>
		<script type="text/javascript">
		$(document).ready(
			function(){				
				$('#portfolio').innerfade({
					speed: 'slow',
					timeout: 2500,
					type: 'sequence',
					containerheight: '290px'
				});			
			}
		);
		</script>
		
		<table>		
		<tr>
		<td><img src="resources/images/b1.jpg"/></td>
		<td>
		<ul id="portfolio">	
				<img src="resources/images/a1.jpg"/>			
				<img src="resources/images/a2.jpg"/>			
				<img src="resources/images/a3.jpg"/>					
		</ul>
		</td>				
</tr>
</table>
		
</body>
</html>